<template>
    <div>
        <!-- <div class="brand" style="height:40px;position:relative;background-color:#E5E9EC;">
            <breadcrumb :arrayName="brand" :hasIcon="hasIcon"></breadcrumb>
        </div> -->
        <el-row class="search">
            <div class="search-collapse">
                <!-- <el-input :placeholder="$t('ndt.subject')" v-model="keysword" size="small" class="search-box"  ></el-input>
                <el-button size="small" slot="append" @click="commonSearch" icon="el-icon-search" class="btn-default search-btn"    ></el-button> -->
                <el-input :placeholder="$t('adt.task_des')" v-model="keysword" class="search-box"  >
                  <el-button slot="append" icon="el-icon-search" @click="commonSearch"></el-button>
                </el-input>
            </div>
            <el-collapse class="search-collapse-content" @change="advanceSearch"  accordion>
                <el-collapse-item>

                    <template slot="title" class="search-collapse-title" >
                        <!-- <span class="vertical-bar"></span>&nbsp;&nbsp; -->
                        <span class="title-font" >{{$t(advSearch)}}</span>
                    </template>

                    <!-- 高级搜索具体内容 -->
                    <el-row :gutter="10" class="row-search" >
                        <el-col :span="2">
                            <label class="label-search">{{$t('ndt.subject')}}:</label>
                        </el-col>
                        <el-col :span="6">
                            <el-input   class="input-small" v-model="taskDes"  size="small" ></el-input>
                        </el-col>

                        <el-col :span="2">
                            <label class="label-search">{{$t('adt.send_time')}}:</label>
                        </el-col>
                        <el-col :span="6">
                            <el-date-picker
                                    class="input-small timeform"
                                    v-model="startTime"
                                    type="daterange"
                                    :range-separator="$t('ndt.to')"
                                    :start-placeholder="$t('ndt.begin_time')"
                                    :end-placeholder="$t('ndt.end_time')">
                            </el-date-picker>
                        </el-col>

                    </el-row>

                    <!-- <el-row :gutter="10" class="row-search">
                    </el-row> -->

                    <!-- 查询和重置按钮-->
                    <el-row :gutter="10" class="row-search">
                        <div class="btn-group-search">
                            <el-col :span="2">&nbsp;</el-col>
                            <el-col :span="6">
                                <el-button class="btn-default" @click="search"  size="small">{{$t('adt.query')}}</el-button>
                                <el-button class="btn-second" style="margin:0;" @click="resetData"  size="small" >{{$t('adt.reset')}}</el-button>
                            </el-col>

                        </div>
                    </el-row>
                </el-collapse-item>

            </el-collapse>
        </el-row>

        <div style="height:15px;background-color:#F1F1F1;"></div>


            
        <el-row class="table-body">
            <el-table  :data="tables" class="no_line table-default" fixed >
                <!-- <el-table-column :label="$t('ndt.proc_pic')" width="80"  >
                    <template slot-scope="scope" >
                        <i style="cursor:pointer;" class="fa fa-file-powerpoint-o" @click="showProcPic(scope.row)" ></i>
                    </template>
                </el-table-column>-->
                <el-table-column type="index" :label="$t('cm.no')" width="55" ></el-table-column> 
                <el-table-column  prop="subject" :label="$t('ndt.subject')" width="380" ></el-table-column>
                <el-table-column  prop="taskid" :label="$t('ndt.taskid')" width="320" ></el-table-column>
                <el-table-column  prop="assigntime" :label="$t('ndt.assigntime')" width="160"  ></el-table-column>
                <el-table-column  prop="duetime" :label="$t('ndt.duetime')" width="160"  ></el-table-column>
                <!-- <el-table-column  prop="lastDealMan" :label="$t('ndt.deal_man')"  ></el-table-column> -->
                <!-- <el-table-column  prop="lastDealTime" :label="$t('ndt.deal_time')" width="160"   ></el-table-column> -->
                <!-- <el-table-column  prop="lastApproveSuggest" :label="$t('ndt.deal_des')"  ></el-table-column> -->
                <el-table-column  :label="$t('ndt.operate')">
                    <template slot-scope="scope" >
                            <el-button  type="text" size="small" @click="editProcInst(scope.row)" >{{$t('ndt.deal')}}</el-button>
                            <!-- <el-button  type="text" size="small" @click="deleteProcInst(scope.row.procInstID)" >{{$t('ndt.delete')}}</el-button> -->
                    </template>
                </el-table-column>


            </el-table>
        </el-row>

        <el-row class="table-bottom">
            <el-pagination
                    @size-change="changeSize"
                    @current-change="changeCurrentPage"
                    @prev-click="prePage"
                    @next-click="nextPage"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>



    </div>

</template>

<script>
    import aue_deal_list from './js/aue_deal_list.js'
    export default aue_deal_list
</script>
